<template>
    <div class="div">
        <!-- {{ 1 | myfilter }}
        <hr>
        {{ 0 | myfilter }}
        <hr>
        {{ reverse_msg }}
        <ul>
            <li v-for='item,index in tlist' :class='{on:index%2==0,off:index%2!=0}'>
                {{ index+1 }}--{{ item['test'] }}
            </li>
        </ul>
        <button @click="counter+=1" class="btn">{{ counter }}</button>
        {{ msg }}
        <div v-html="msg"></div> -->
        <table class="tb">
            <tr class="tr">
                <th>序号</th>
                <th>商品名称</th>
                <th>商品价格</th>
                <th>购买数量</th>
                <th>操作</th>
            </tr>
            <tr v-show="type" v-for="item,index in a_list" class="tr">
                <th class="th">{{ index+1 }}</th>
                <th class="th">{{ item['name'] }}</th>
                <th class="th">{{ item['price'] }}</th>
                <th class="th">
                    <button @click="func1(index)" class="btn01">-</button>
                    {{ item['num'] }}
                    <button @click="func2(index)" class="btn01">+</button>
                </th>
                <th class="th"><button @click="func3(index)" class="btn02">移除</button></th>
            </tr>
        </table>
        <h6>总价: $ {{ counter }}</h6>
    </div>

</template>
<script>
    export default{
        //数据定义
        data(){
            return {
                // msg: "这是一个变量",
                // tlist: [
                //     {'test': '汽车'},
                //     {'test': '面包'},
                //     {'test': '橙子'},
                //     {'test': '帽子'},
                //     {'test': '鞋子'},
                // ],
                // counter: 0
                a_list: [
                    {name: 'iphone 8', price: 5099, num: 1},
                    {name: 'iphone xs', price: 8699, num: 1},
                    {name: 'iphone xr', price: 6499, num: 1},
                ],
                type: true,
                number: 0

            }
        },
        //初始化方法
        mounted(){

        },
        // 常用方法
        methods: {
            func1(index){
                let num = this.a_list[index]['num']
                if (num >= 1){
                    this.a_list[index]['num'] = num - 1
                }
                else{
                    this.a_list[index]['num'] = 0
                }
            },
            func2(index){
                let num = this.a_list[index]['num']
                this.a_list[index]['num'] = num + 1
                console.log(this.a_list[index]['num'])
            },
            func3(index){
                this.a_list.splice(index,1)
            }
        },
        // 计算属性
        computed: {
            // reverse_msg(){
            //     return this.msg.split("").reverse().join('')
            // }
            counter(){
                let count = 0,i;
                for(i = 0; i < this.a_list.length; i++){
                    let item = this.a_list[i]
                    let price = item['price'] * item['num']
                    count += price
                }
                return count
            }
        },
        // 监听属性
        watch: {
            // counter(new_value, old_value){
            //     console.log('计数器的变化' + old_value + '变成了' + new_value)
            // }
            b_list(new_value, old_value){
                console.log('计数器的变化' + old_value + '变成了' + new_value)
            }
        },
        // 过滤器
        filters: {
            // myfilter(value){
            //     if(value==1){
            //         return '已支付'
            //     }
            //     else{
            //         return '未支付'
            //     }
            // }
        }
    }
</script>
<style lang="stylus">
    // .on
    //     background-color yellow 
    // .off
    //     background-color green
    // .btn
    //     width 200px
    //     height 100px
    //     background-color red
    .tr
        border 1px solid black
    th 
        width 80px
        height 60px
    .btn01
        width 20px
        height 20px
        text-align auto
    .th
        border-top 1px solid rgb(233,233,233)
        border-bottom 1px solid rgb(233,233,233)
    button
        border-radius 35%
</style>